<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>信息管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/jQueryForm/jQueryForm.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js?skin=blue"></script>
    <script type="text/javascript" src="/js/plugins/My97DatePicker/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/iframeTools.js"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script>
        $(function () {
            //修改表单的提交方式,就是把表单的提交方式修改为ajax
            $("#editForm").ajaxForm(function (data) {
                //显示那个温馨提示框
                showDialog("操作成功", function () {
                    location.href = "/stockOutcomeBill/list.do";
                });
            });

            //表单提交(先给按钮绑定点击事件)
            $(".but_submit").click(function () {

                //在表单提交之前设置提交的参数
                //循环出所有的tr
                $.each($("#edit_table_body tr"),function (index,ele) {
                    //手动设置索引
                    $(ele).find("input[tag='number']").prop("name","items["+index+"].number");
                    $(ele).find("input[tag='salePrice']").prop("name","items["+index+"].salePrice");
                    $(ele).find("input[tag='remark']").prop("name","items["+index+"].remark");
                    $(ele).find("input[tag='pid']").prop("name","items["+index+"].product.id");
                });

                //提交表单
                $("#editForm").submit();
            });

            //设置日期
            $(".Wdate").click(function () {
                WdatePicker({
                    maxDate: new Date(),
                    readOnly: true
                })
            });

            //添加一行明细(因为不在tbody中,所有不能放到同一事件中)
            $(".appendRow").click(function () {
                //首先克隆第一行数据(连同事件一起克隆)
                var copy = $("#edit_table_body tr:first").clone(true);
                //清空里面的数据
                copy.find("input").val("");
                copy.find("span").html("");
                //添加关系
                $(copy).appendTo("#edit_table_body");
            });

            //绑定同一事件
            $("#edit_table_body").on("click", ".searchproduct", function () {
                //获取当前事件所在的行
                var tr = $(this).closest("tr");
                $.dialog.open("/product/productListView.do", {
                    title: '请选择商品',
                    width: '90%',
                    height: '90%',
                    left: '50%',
                    top: '50%',
                    lock: true,
                    resize: false,
                    close: function () {
                        //取出框框架共享的数据
                        var data = $.dialog.data("data");
                        //设置tboyd中的值
                        if (data) {
                            //删除框架共享的数据
                            $.dialog.removeData("data");

                            tr.find("input[tag='name']").val(data.name);
                            tr.find("input[tag='pid']").val(data.id);
                            tr.find("span[tag='brand']").html(data.brandName);
                            tr.find("input[tag='salePrice']").val(data.salePrice);
                            tr.find("input[tag='number']").val(data.number||1);
                            tr.find("span[tag='amount']").html(data.salePrice);
                            //备注不需要填,以为这是留给客户输入的
                        }
                    }
                }, false);
                //绑定失去焦点事件
            }).on("blur","input[tag='salePrice'],input[tag='number']", function () {

                //获取当前事件所在行
                var tr = $(this).closest("tr");
                var salePrice = tr.find("input[tag='salePrice']").val();
                var number = tr.find("input[tag='number']").val();
                tr.find("span[tag='amount']").html((salePrice*number).toFixed(2));
                //绑定失去焦点事件
            }).on("click",".removeItem",function () {
                //获取当前事件所在的行
                var tr = $(this).closest("tr");
                //判断要删除的行是否是第一行,如果是第一行,那么清空数据就行了
                if ($("#edit_table_body tr").size() == 1) {
                    //清空第一行的数据
                    tr.find("input").val("");
                    tr.find("span").html("");
                    return;
                }
                //如果不是第一行数据,就删除掉
                tr.remove();
            });
        });
    </script>
</head>
<body>
<form id="editForm" action="/stockOutcomeBill/saveOrUpdate.do" method="post">
    <input type="hidden" name="id" value="${entity.id}">
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">销售出库库编辑</span>
            <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
                <tr>
                    <td class="ui_text_rt" width="140">出库单编码</td>
                    <td class="ui_text_lt">
                        <input name="sn" value="${entity.sn}" class="ui_select03"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">仓库</td>
                    <td class="ui_text_lt">
                        <select id="depot" name="depot.id" class="ui_select03">
                            <c:forEach items="${depots}" var="depot">
                                <option value="${depot.id}">${depot.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">客户</td>
                    <td class="ui_text_lt">
                        <select id="client" name="client.id" class="ui_select03">
                            <c:forEach items="${clients}" var="client">
                                <option value="${client.id}">${client.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <script>
                    $("#depot option[value='${depot.id}']").prop("selected", true);
                    $("#client option[value='${client.id}']").prop("selected", true);
                </script>
                <tr>
                    <td class="ui_text_rt" width="140">业务时间</td>
                    <td class="ui_text_lt">
                        <fmt:formatDate value="${entity.vdate}" var="vdate"/>
                        <input name="vdate" value="${vdate}" class="ui_select03 Wdate"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">明细</td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加明细" class="ui_input_btn01 appendRow"/>
                        <table class="edit_table" cellspacing="0" cellpadding="0" border="0">
                            <thead>
                            <tr>
                                <th width="10"></th>
                                <th width="170">货品</th>
                                <th width="100">品牌</th>
                                <th width="80">价格</th>
                                <th width="80">数量</th>
                                <th width="100">金额小计</th>
                                <th width="180">备注</th>
                                <th width="120"></th>
                            </tr>
                            </thead>
                            <tbody id="edit_table_body">
                            <c:choose>
                                <c:when test="${empty entity.id}">
                                    <tr>
                                        <td></td>
                                        <td>
                                            <input disabled readonly class="ui_input_txt01" tag="name"/>
                                            <img src="/images/common/search.png" class="searchproduct"/>
                                            <input type="hidden" tag="pid"/>
                                        </td>
                                        <td><span tag="brand"></span></td>
                                        <td><input type="number" tag="salePrice" name="items[0].salePrice"
                                                   class="ui_input_txt01"/>
                                        </td>
                                        <td><input type="number" tag="number" name="items[0].number"
                                                   class="ui_input_txt01"/>
                                        </td>
                                        <td><span tag="amount"></span></td>
                                        <td><input tag="remark" name="items[0].remark" class="ui_input_txt01"/></td>
                                        <td>
                                            <a href="javascript:;" class="removeItem">删除明细</a>
                                        </td>
                                    </tr>
                                </c:when>
                                <c:otherwise>
                                    <c:forEach items="${entity.items}" var="item">
                                        <tr>
                                            <td></td>
                                            <td>
                                                <input disabled readonly class="ui_input_txt01"
                                                       value="${item.product.name}" tag="name"/>
                                                <img src="/images/common/search.png" class="searchproduct"/>
                                                <input type="hidden" tag="pid" value="${item.product.id}"/>
                                            </td>
                                            <td><span tag="brand">${item.product.brandName}</span></td>
                                            <td><input type="number" value="${item.salePrice}" tag="salePrice"
                                                       name="items[0].salePrice"
                                                       class="ui_input_txt01"/>
                                            </td>
                                            <td><input type="number" value="${item.number}" tag="number"
                                                       name="items[0].number" class="ui_input_txt01"/>
                                            </td>
                                            <td><span tag="amount">${item.amount}</span></td>
                                            <td><input tag="remark" value="${item.remark}" name="items[0].remark"
                                                       class="ui_input_txt01"/></td>
                                            <td>
                                                <a href="javascript:;" class="removeItem">删除明细</a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </c:otherwise>
                            </c:choose>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="ui_text_lt">
                        &nbsp;<input type="button" value="确定保存" class="ui_input_btn01 but_submit"/>
                        &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
</body>
</html>